<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bilibili字体图标示例</title>
    <link rel="stylesheet" href="./bilifont.css">
    <style>
        .bilifont {
            color:deeppink;
            font-size:48px
        }
        .split{
            color:green;
        }
    </style>
</head>
<body>
    <p class="split">===============下面是demo==================</p>
    <h3>美食区 <span class="bilifont bili-food"></span></h3>
    <span>class="bilifont bili-food"</span>
    <p class="split">=================================</p>
    <h3>PC <span class="bilifont bili-PC"></span></h3>
    <span>class="bilifont bili-PC"</span>
    <p class="split">=================================</p>
    <h3>Mobile <span class="bilifont bili-Mobile"></span></h3>
    <span>class="bilifont bili-Mobile"</span>
    <p class="split">=================================</p>
    <h3>删除 <span class="bilifont bili-shanchu"></span></h3>
    <span>class="bilifont bili-shanchu"</span>
    <p class="split">=================================</p>
    <h3>iPad <span class="bilifont bili-iPad"></span></h3>
    <span>class="bilifont bili-iPad"</span>
    <p class="split">=================================</p>
    <h3>TV <span class="bilifont bili-TV"></span></h3>
    <span>class="bilifont bili-TV"</span>
    <p class="split">=================================</p>
    <h3>科技 <span class="bilifont bili-technology"></span></h3>
    <span>class="bilifont bili-technology"</span>
    <p class="split">=================================</p>
    <h3>频道 <span class="bilifont bili-pindao"></span></h3>
    <span>class="bilifont bili-pindao"</span>
    <p class="split">=================================</p>
    <h3>信息 <span class="bilifont bili-information"></span></h3>
    <span>class="bilifont bili-information"</span>
    <p class="split">=================================</p>
    <h3>知识 <span class="bilifont bili-zhishi"></span></h3>
    <span>class="bilifont bili-zhishi"</span>
    <p class="split">=================================</p>
    <h3>musicplus <span class="bilifont bili-musicplus"></span></h3>
    <span>class="bilifont bili-musicplus"</span>
    <p class="split">=================================</p>
    <h3>partition_Comic <span class="bilifont bili-ic_partition_Comic"></span></h3>
    <span>class="bilifont bili-ic_partition_Comic"</span>
    <p class="split">=================================</p>
    <h3>dingdao_cheese <span class="bilifont bili-icon_dingdao_cheese"></span></h3>
    <span>class="bilifont bili-icon_dingdao_cheese"</span>
    <p class="split">=================================</p>
    <h3>视频弹幕 <span class="bilifont bili-icon_shipin_danmushu"></span></h3>
    <span>class="bilifont bili-icon_shipin_danmushu"</span>
    <p class="split">=================================</p>
    <h3>视频收藏 <span class="bilifont bili-icon_shipin_shoucangshu"></span></h3>
    <span>class="bilifont bili-icon_shipin_shoucangshu"</span>
    <p class="split">=================================</p>
    <h3>视频投币 <span class="bilifont bili-icon_shipin_yingbishu"></span></h3>
    <span>class="bilifont bili-icon_shipin_yingbishu"</span>
    <p class="split">=================================</p>
    <h3>操作选中 <span class="bilifont bili-icon_caozuo_xuanzhong"></span></h3>
    <span>class="bilifont bili-icon_caozuo_xuanzhong"</span>
    <p class="split">=================================</p>
    <h3>语言设置 <span class="bilifont bili-icon_dingdao_yuyanshezhi"></span></h3>
    <span>class="bilifont bili-icon_dingdao_yuyanshezhi"</span>
    <p class="split">=================================</p>
    <h3>微博 <span class="bilifont bili-icon_weibo"></span></h3>
    <span>class="bilifont bili-icon_weibo"</span>
    <p class="split">=================================</p>
    <h3>微信 <span class="bilifont bili-icon_wechat"></span></h3>
    <span>class="bilifont bili-icon_wechat"</span>
    <p class="split">=================================</p>
    <h3>下载 <span class="bilifont bili-icon_download"></span></h3>
    <span>class="bilifont bili-icon_download"</span>
    <p class="split">=================================</p>
    <h3>特别推荐 <span class="bilifont bili-tebietuijian"></span></h3>
    <span>class="bilifont bili-tebietuijian"</span>
    <p class="split">=================================</p>
    <h3>杯子</span> <span class="bilifont bili-match"></span></h3>
    <span>class="bilifont bili-match"</span>
    <p class="split">=================================</p>
    <h3>排序 <span class="bilifont bili-icon_youdaohang_paixu"></span></h3>
    <span>class="bilifont bili-icon_youdaohang_paixu"</span>
    <p class="split">=================================</p>
    <h3>回到顶部 <span class="bilifont bili-icon_youdaohang_huidaodingbu"></span></h3>
    <span>class="bilifont bili-icon_youdaohang_huidaodingbu"</span>
    <p class="split">=================================</p>
    <h3>小电视天线 <span class="bilifont bili-icon_youdaohang_xiaodianshitianxian"></span></h3>
    <span>class="bilifont bili-icon_youdaohang_xiaodianshitianxian"</span>
    <p class="split">=================================</p>
    <h3>硬币+1<span class="bilifont bili-yingbi"></span></h3>
    <span>class="bilifont bili-yingbi"</span>
    <p class="split">=================================</p>
    <h3>沙发<span class="bilifont bili-teleplay"></span></h3>
    <span>class="bilifont bili-teleplay"</span>
    <p class="split">=================================</p>
    <h3>鲸鱼 <span class="bilifont bili-documentary"></span></h3>
    <span>class="bilifont bili-documentary"</span>
    <p class="split">=================================</p>
    <h3>电影 <span class="bilifont bili-movie"></span></h3>
    <span>class="bilifont bili-movie"</span>
    <p class="split">=================================</p>
    <h3>推广 <span class="bilifont bili-tuiguang"></span></h3>
    <span>class="bilifont bili-tuiguang"</span>
    <p class="split">=================================</p>
    <h3>店铺 <span class="bilifont bili-icon_dingdao_dianpu"></span></h3>
    <span>class="bilifont bili-icon_dingdao_dianpu"</span>
    <p class="split">=================================</p>
    <h3>音乐 <span class="bilifont bili-music"></span></h3>
    <span>class="bilifont bili-music"</span>
    <p class="split">=================================</p>
    <h3>游戏 <span class="bilifont bili-game"></span></h3>
    <span>class="bilifont bili-game"</span>
    <p class="split">=================================</p>
    <h3>舞蹈 <span class="bilifont bili-dance"></span></h3>
    <span>class="bilifont bili-dance"</span>
    <p class="split">=================================</p>
    <h3>直播 <span class="bilifont bili-live"></span></h3>
    <span>class="bilifont bili-live"</span>
    <p class="split">=================================</p>
    <h3>娱乐 <span class="bilifont bili-ent"></span></h3>
    <span>class="bilifont bili-ent"</span>
    <p class="split">=================================</p>
    <h3>生活 <span class="bilifont bili-life"></span></h3>
    <span>class="bilifont bili-life"</span>
    <p class="split">=================================</p>
    <h3>鬼畜 <span class="bilifont bili-kichiku"></span></h3>
    <span>class="bilifont bili-kichiku"</span>
    <p class="split">=================================</p>
    <h3>国创 <span class="bilifont bili-guochuang"></span></h3>
    <span>class="bilifont bili-guochuang"</span>
    <p class="split">=================================</p>
    <h3>时尚 <span class="bilifont bili-fashion"></span></h3>
    <span>class="bilifont bili-fashion"</span>
    <p class="split">=================================</p>
    <h3>广告 <span class="bilifont bili-ad"></span></h3>
    <span>class="bilifont bili-ad"</span>
    <p class="split">=================================</p>
    <h3>动画 <span class="bilifont bili-anime"></span></h3>
    <span>class="bilifont bili-anime"</span>
    <p class="split">=================================</p>
    <h3>国创动画推荐 <span class="bilifont bili-guochandonghuatuijian"></span></h3>
    <span>class="bilifont bili-guochandonghuatuijian"</span>
    <p class="split">=================================</p>
    <h3>科技 <span class="bilifont bili-_technology"></span></h3>
    <span>class="bilifont bili-_technology"</span>
    <p class="split">=================================</p>
    <h3>上 <span class="bilifont bili-general_pullup_s"></span></h3>
    <span>class="bilifont bili-general_pullup_s"</span>
    <p class="split">=================================</p>
    <h3>导航栏bilibili<span class="bilifont bili-Navbar_mobile"></span></h3>
    <span>class="bilifont bili-Navbar_mobile"</span>
    <p class="split">=================================</p>
    <h3>哔哩哔哩TV <span class="bilifont bili-bilibili-tv"></span></h3>
    <span>class="bilifont bili-bilibili-tv"</span>
    <p class="split">=================================</p>
    <h3>下 <span class="bilifont bili-icon_caozuo_xiangyou-copy"></span></h3>
    <span>class="bilifont bili-icon_caozuo_xiangyou-copy"</span>
    <p class="split">=================================</p>
    <h3>搜索<span class="bilifont bili-general_search"></span></h3>
    <span>class="bilifont bili-general_search"</span>
    <p class="split">=================================</p>
    <h3>活动 <span class="bilifont bili-activit"></span></h3>
    <span>class="bilifont bili-activit"</span>
    <p class="split">=================================</p>
    <h3>小黑屋 <span class="bilifont bili-blackroom"></span></h3>
    <span>class="bilifont bili-blackroom"</span>
    <p class="split">=================================</p>
    <h3>读书 <span class="bilifont bili-read"></span></h3>
    <span>class="bilifont bili-read"</span>
    <p class="split">=================================</p>
    <h3>放映厅 <span class="bilifont bili-ic_partition_broadca"></span></h3>
    <span>class="bilifont bili-ic_partition_broadca"</span>
    <p class="split">=================================</p>
    <h3>？ <span class="bilifont bili-cinephile"></span></h3>
    <span>class="bilifont bili-cinephile"</span>
    <p class="split">=================================</p>
    <h3>？ <span class="bilifont bili-cinema"></span></h3>
    <span>class="bilifont bili-cinema"</span>
    <p class="split">=================================</p>
    <h3>话题 <span class="bilifont bili-topic"></span></h3>
    <span>class="bilifont bili-topic"</span>
    <p class="split">=================================</p>
    <h3>？ <span class="bilifont bili-douga"></span></h3>
    <span>class="bilifont bili-douga"</span>
    <p class="split">=================================</p>
    <h3>数码 <span class="bilifont bili-digital"></span></h3>
    <span>class="bilifont bili-digital"</span>
    <p class="split">=================================</p>
    <h3>音频 <span class="bilifont bili-yinpin"></span></h3>
    <span>class="bilifont bili-yinpin"</span>
    <p class="split">=================================</p>
    <h3>订单中心 <span class="bilifont bili-icon_dingdao_dingdanzhongxin"></span></h3>
    <span>class="bilifont bili-icon_dingdao_dingdanzhongxin"</span>
    <p class="split">=================================</p>
    <h3>直播中心 <span class="bilifont bili-icon_dingdao_zhibozhongxin"></span></h3>
    <span>class="bilifont bili-icon_dingdao_zhibozhongxin"</span>
    <p class="split">=================================</p>
    <h3>登出 <span class="bilifont bili-icon_dingdao_dengchu"></span></h3>
    <span>class="bilifont bili-icon_dingdao_dengchu"</span>
    <p class="split">=================================</p>
    <h3>个人中心 <span class="bilifont bili-icon_dingdao_gerenzhongxin"></span></h3>
    <span>class="bilifont bili-icon_dingdao_gerenzhongxin"</span>
    <p class="split">=================================</p>
    <h3>投稿管理 <span class="bilifont bili-icon_dingdao_tougaoguanli"></span></h3>
    <span>class="bilifont bili-icon_dingdao_tougaoguanli"</span>
    <p class="split">=================================</p>
    <h3>视频投稿 <span class="bilifont bili-icon_dingdao_shipintougao"></span></h3>
    <span>class="bilifont bili-icon_dingdao_shipintougao"</span>
    <p class="split">=================================</p>
    <h3>文章投稿 <span class="bilifont bili-icon_dingdao_wenzhangtougao"></span></h3>
    <span>class="bilifont bili-icon_dingdao_wenzhangtougao"</span>
    <p class="split">=================================</p>
    <h3>创作中心 <span class="bilifont bili-icon_dingdao_chuangzuozhongxin"></span></h3>
    <span>class="bilifont bili-icon_dingdao_chuangzuozhongxin"</span>
    <p class="split">=================================</p>
    <h3>音频投稿 <span class="bilifont bili-icon_dingdao_yinpintougao"></span></h3>
    <span>class="bilifont bili-icon_dingdao_yinpintougao"</span>
    <p class="split">=================================</p>
    <h3>投稿管理 <span class="bilifont bili-icon_dingdao_tougaoguanli1"></span></h3>
    <span>class="bilifont bili-icon_dingdao_tougaoguanli1"</span>
    <p class="split">=================================</p>
    <h3>主站 <span class="bilifont bili-icon_dingdao_zhuzhan"></span></h3>
    <span>class="bilifont bili-music"</span>
    <p class="split">=================================</p>
    <h3>搜索 <span class="bilifont bili-icon_dingdao_sousuo"></span></h3>
    <span>class="bilifont bili-icon_dingdao_sousuo"</span>
    <p class="split">=================================</p>
    <h3>下载app <span class="bilifont bili-icon_dingdao_xiazaiapp"></span></h3>
    <span>class="bilifont bili-icon_dingdao_xiazaiapp"</span>
    <p class="split">=================================</p>
    <h3>历史记录 <span class="bilifont bili-icon_dingdao_lishijilu"></span></h3>
    <span>class="bilifont bili-icon_dingdao_lishijilu"</span>
    <p class="split">=================================</p>
    <h3>收藏夹 <span class="bilifont bili-icon_dingdao_shoucangjia"></span></h3>
    <span>class="bilifont bili-icon_dingdao_shoucangjia"</span>
    <p class="split">=================================</p>
    <h3>消息 <span class="bilifont bili-icon_dingdao_xiaoxi"></span></h3>
    <span>class="bilifont bili-icon_dingdao_xiaoxi"</span>
    <p class="split">=================================</p>
    <h3>动态 <span class="bilifont bili-icon_dingdao_dongtai"></span></h3>
    <span>class="bilifont bili-icon_dingdao_dongtai"</span>
    <p class="split">=================================</p>
    <h3>绑定手机 <span class="bilifont bili-icon_dingdao_bangdingshouji"></span></h3>
    <span>class="bilifont bili-icon_dingdao_bangdingshouji"</span>
    <p class="split">=================================</p>
    <h3>硬币数 <span class="bilifont bili-icon_dingdao_yingbi"></span></h3>
    <span>class="bilifont bili-icon_dingdao_yingbi"</span>
    <p class="split">=================================</p>
    <h3>邮箱 <span class="bilifont bili-icon_dingdao_youxiang"></span></h3>
    <span>class="bilifont bili-icon_dingdao_youxiang"</span>
    <p class="split">=================================</p>
    <h3>B币 <span class="bilifont bili-icon_dingdao_Bbi"></span></h3>
    <span>class="bilifont bili-icon_dingdao_Bbi"</span>
    <p class="split">=================================</p>
    <h3>播放 <span class="bilifont bili-icon_dingdao_bofang"></span></h3>
    <span>class="bilifont bili-icon_dingdao_bofang"</span>
    <p class="split">=================================</p>
    <h3>首页 <span class="bilifont bili-icon_fenqudaohang_shouye"></span></h3>
    <span>class="bilifont bili-_technology"</span>
    <p class="split">=================================</p>
    <h3>排行榜 <span class="bilifont bili-icon_fenqudaohang_paihangbang"></span></h3>
    <span>class="bilifont bili-icon_fenqudaohang_paihangbang"</span>
    <p class="split">=================================</p>
    <h3>轮播图选中的<span class="bilifont bili-icon_banner_xuanzhong"></span></h3>
    <span>class="bilifont bili-icon_banner_xuanzhong"</span>
    <p class="split">=================================</p>
    <h3>前往 <span class="bilifont bili-icon_caozuo_qianwang"></span></h3>
    <span>class="bilifont bili-icon_caozuo_qianwang"</span>
    <p class="split">=================================</p>
    <h3>换一换 <span class="bilifont bili-icon_caozuo_huanyihuan"></span></h3>
    <span>class="bilifont bili-icon_caozuo_huanyihuan"</span>
    <p class="split">=================================</p>
    <h3>评论数<span class="bilifont bili-icon_xinxi_pinglunshu"></span></h3>
    <span>class="bilifont bili-icon_xinxi_pinglunshu"</span>
    <p class="split">=================================</p>
    <h3>播放数 <span class="bilifont bili-icon_shipin_bofangshu"></span></h3>
    <span>class="bilifont bili-icon_shipin_bofangshu"</span>
    <p class="split">=================================</p>
    <h3>人气 <span class="bilifont bili-icon_xinxi_renqi"></span></h3>
    <span>class="bilifont bili-icon_xinxi_renqi"</span>
    <p class="split">=================================</p>
    <h3>点赞数 <span class="bilifont bili-icon_shipin_dianzanshu"></span></h3>
    <span>class="bilifont bili-icon_shipin_dianzanshu"</span>
    <p class="split">=================================</p>
    <h3>放映厅 <span class="bilifont bili-ic_partition_broadca"></span></h3>
    <span>class="bilifont bili-ic_partition_broadca"</span>
    <p class="split">=================================</p>
    <h3>UP主 <span class="bilifont bili-icon_xinxi_UPzhu"></span></h3>
    <span>class="bilifont bili-icon_xinxi_UPzhu"</span>
    <p class="split">=================================</p>
    <h3>阅读数 <span class="bilifont bili-icon_xinxi_yuedushu"></span></h3>
    <span>class="bilifont bili-icon_xinxi_yuedushu"</span>
    <p class="split">=================================</p>
    <h3>火了 <span class="bilifont bili-icon_xinxi_huo"></span></h3>
    <span>class="bilifont bili-icon_xinxi_huo"</span>
    <p class="split">=================================</p>
    <h3>右 <span class="bilifont bili-icon_caozuo_xiangyou"></span></h3>
    <span>class="bilifont bili-icon_caozuo_xiangyou"</span>
    <p class="split">=================================</p>
    <h3>左 <span class="bilifont bili-icon_caozuo_xiangzuo"></span></h3>
    <span>class="bilifont bili-digital"</span>
    <p class="split">=================================</p>
    <h3>微信 <span class="bilifont bili-icon_foot_weixin"></span></h3>
    <span>class="bilifont bili-icon_foot_weixin"</span>
    <p class="split">=================================</p>
    <h3>客户端下载 <span class="bilifont bili-icon_foot_kehuduanxiazai"></span></h3>
    <span>class="bilifont bili-icon_foot_kehuduanxiazai"</span>
    <p class="split">=================================</p>
    <h3>微博 <span class="bilifont bili-icon_foot_weibo"></span></h3>
    <span>class="bilifont bili-icon_foot_weibo"</span>
    <p class="split">=================================</p>
    <h3>已添加 <span class="bilifont bili-icon_caozuo_yitianjia"></span></h3>
    <span>class="bilifont bili-icon_caozuo_yitianjia"</span>
    <p class="split">=================================</p>
    <h3>搜素移除 <span class="bilifont bili-icon_sousuo_yichu"></span></h3>
    <span>class="bilifont bili-icon_sousuo_yichu"</span>
    <p class="split">=================================</p>
</body>
</html>